<template>

    <el-tabs value="monitor" style="height: 100vh;" class="dashboard_index" >

      <el-tab-pane label="监控" name="monitor" style="min-height: 60vh;">
        <span slot="label" style="color: #FFFFFF"><i class="el-icon-data-analysis"></i> 监控</span>
        <div class="monitor_group">
          <dashboard_search title="IndSvr-行动" style="margin-top: 10vh"></dashboard_search>
          <dashboard_panel_monitor></dashboard_panel_monitor>
        </div>
      </el-tab-pane>


      <el-tab-pane label="服务" name="service" style="min-height: 60vh">
        <span slot="label" style="color: #FFFFFF"><i class="el-icon-cpu"></i> 服务</span>
        <div class="monitor_group">
          <dashboard_panel_service></dashboard_panel_service>
        </div>
      </el-tab-pane>


      <el-tab-pane label="书签" name="notebook" style="min-height: 60vh">
        <span slot="label" style="color: #FFFFFF"><i class="el-icon-collection"></i> 书签</span>
        <div class="monitor_group">
          <dashboard_panel_notebook></dashboard_panel_notebook>
        </div>
      </el-tab-pane>


<!--      <el-tab-pane label="媒体" name="media" style="min-height: 60vh">-->
<!--        <span slot="label" style="color: #FFFFFF"><i class="el-icon-collection"></i> 媒体</span>-->
<!--        <div class="monitor_group">-->

<!--          <iframe src="/manager" style="width: 100%;height: 100%;margin: 0;padding: 0;background: #FFFFFF"></iframe>-->
<!--        </div>-->
<!--      </el-tab-pane>-->
    </el-tabs>

</template>

<script>
import CpuRamIoItem from "@/components/Dashboard/item/CpuRamIoItem/index.vue";
import DiskItem from "@/components/Dashboard/item/DiskItem/index.vue";
import axios from "axios";
import Dashboard_search from "@/components/Dashboard/Search/index.vue";
import Dashboard_panel_service from "@/components/Dashboard/Panel/Service/index.vue";
import Dashboard_panel_notebook from "@/components/Dashboard/Panel/Notebook/index.vue";
import Dashboard_panel_monitor from "@/components/Dashboard/Panel/Monitor/index.vue";

export default {
  name: "index",
  components: {
    Dashboard_panel_monitor,
    Dashboard_panel_notebook,
    Dashboard_panel_service,
    Dashboard_search,
    CpuRamIoItem, DiskItem},
  data() {
    return {
      // 服务器信息
      server: [],
      colors: [
        {color: '#f56c6c', percentage: 20},
        {color: '#e6a23c', percentage: 40},
        {color: '#5cb87a', percentage: 60},
        {color: '#1989fa', percentage: 80},
        {color: '#6f7ad3', percentage: 100}
      ],

    }
  },
  created() {


  },
  methods: {}
}
</script>
<style scoped>

.dashboard_index {
  background-image: url("https://fn.indsvr.com/static/bg/wallpaper-1.webp");
  background-repeat:  no-repeat;
  background-size: cover; /* 调整图片大小以覆盖整个容器 */
  background-position: center; /* 图片居中显示 */
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: auto 0;
  padding: 0 8vw 0 8vw;
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}




.monitor_group::-webkit-scrollbar {
  display: none;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.monitor_group{
  height: calc(100vh - 60px);
  overflow-y: auto;
  scrollbar-width: none;
}



</style>
